import { Upload,message } from 'antd';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, {useEffect, useState} from 'react';


const App: React.FC = (props: any) => {
  const [previewOpen, setPreviewOpen] = useState();
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');

  const onChange: UploadProps['onChange'] = async ({ file,fileList: newFileList }) => {
    await props.setFileList(newFileList);
    props.form.setFieldValue('uploadImgs', props.fileList);
    if(file?.response){
      message.destroy()
      if(file?.response?.code == 0){
        message.success('上传成功')
      }else{
        message.error(file.response.data[0].message)
      }
    }
  };

  const onPreview = async (file: UploadFile) => {
    // if (!file.url && !file.preview) {
    //   file.preview = await getBase64(file.originFileObj as RcFile);
    // }

    setPreviewImage(file.response.data[0].httpurl|| file.response.data[0].path );
    setPreviewOpen(true);
    setPreviewTitle(file.fileName || file.name || file.response.data[0].httpurl!.substring(file.response.data[0].httpurl!.lastIndexOf('/') + 1));
  };
  const handleCancel = () => setPreviewOpen(false);
  　　//根据官方属性定制化裁剪框大小固定的裁剪组件属性
        const propsCrop = {
            width: 500,  //裁剪宽度
            height: 300, //裁剪高度

        };
  const beforeUpload = ()=>{
    message.loading('图片正在上传！',0);
  }

  return (
    <>
        <Upload
          name="file"
          action={props.url||"/api/v1/topic/batchUpload"}
          listType="picture-card"
          beforeUpload={beforeUpload}
          fileList={props.fileList}
          onChange={onChange}
          // onPreview={onPreview}
          headers={{'Token':'Bearer ' + window.sessionStorage.getItem('userToken')}}
          maxCount={props.maxCount}
          data={(file)=>{return {fileList:file,compress:typeof props.compress == 'undefined' ? 1:0}}}
        >
          {props.content || (props.fileList.length < 5 && '+ Upload')}
        </Upload>

    </>
  );
};

export default App;
